<template>
    <div class="markdown">
      <introduction>
        Markdown 我们这里选用了<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下<a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14"> 相关文章 </a>
      </introduction>
      <markdown-editor v-model="content" class="md-editor"></markdown-editor>
      <div><el-button type="primary" @click="convert2html">转换为HTML</el-button></div>
      <div class="html" v-html="html"></div>
    </div>
</template>

<script>
    import markdownEditor from '@/components/MarkdownEditor'
    import introduction from '@/components/Introduction'

    const content = `
**this is test**

* vue
* element
* webpack

## Simplemde
`

    export default {
      name: "markdown",
      components:{ markdownEditor, introduction },
      data: function () {
        return {
          content: content,
          html: ''
        }
      },
      methods: {
        convert2html: function () {
          let self = this
          import("showdown").then(function (showdown) {
            let convertor = new showdown.Converter()
            self.html = convertor.makeHtml(self.content)
          })

        }
      }
    }
</script>

<style lang="scss" scoped>
  .markdown{
    .md-editor {
      margin-top: 20px;
    }
    .html{
      margin-top: 20px;
    }
  }
</style>
